<template>
	<view class="container">
		<view class="section live-section">
			<view class="section-title">课程直播</view>
			<view class="live-preview" v-if="isLiving">
				<live-player class="live-player" :src="liveUrl" mode="live" :autoplay="true"></live-player>
				<view class="live-info">
					<text class="course-name">{{currentCourse.name}}</text>
					<text class="teacher-name">{{currentCourse.teacher}}</text>
					<text class="online-count">在线 {{currentCourse.onlineCount}} 人</text>
				</view>
				<button class="end-btn" @click="endLive">结束直播</button>
			</view>
			<view class="start-live" v-else>
				<button class="start-btn" @click="startLive">开始直播</button>
			</view>
		</view>

		<view class="section record-section">
			<view class="section-title">课程录制</view>
			<view class="record-list">
				<view class="record-item" v-for="(record, index) in records" :key="index">
					<image :src="record.cover" mode="aspectFill"></image>
					<view class="record-info">
						<text class="title">{{record.title}}</text>
						<text class="time">{{record.time}}</text>
					</view>
					<button class="play-btn" @click="playRecord(record)">播放</button>
				</view>
			</view>
		</view>

		<view class="section quiz-section">
			<view class="section-title">互动测评</view>
			<view class="quiz-list">
				<view class="quiz-item" v-for="(quiz, index) in quizzes" :key="index">
					<view class="quiz-header">
						<text class="quiz-title">{{quiz.title}}</text>
						<text class="quiz-status" :class="quiz.status">{{quiz.statusText}}</text>
					</view>
					<view class="quiz-stats">
						<text>参与人数: {{quiz.participantCount}}</text>
						<text>平均分: {{quiz.averageScore}}</text>
					</view>
					<button class="quiz-btn" @click="manageQuiz(quiz)">{{quiz.status === 'active' ? '结束测评' : '开始测评'}}</button>
				</view>
			</view>
			<button class="add-btn" @click="createQuiz">新建测评</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLiving: false,
			liveUrl: '',
			currentCourse: {
				name: '高等数学（上）',
				teacher: '张教授',
				onlineCount: 128
			},
			records: [
				{
					title: '微积分基础概念',
					cover: '/static/images/course1.jpg',
					time: '2024-03-15 10:00',
					url: 'https://example.com/video1'
				},
				{
					title: '导数与微分',
					cover: '/static/images/course2.jpg',
					time: '2024-03-14 14:30',
					url: 'https://example.com/video2'
				}
			],
			quizzes: [
				{
					title: '第一章测验',
					status: 'active',
					statusText: '进行中',
					participantCount: 45,
					averageScore: 85
				},
				{
					title: '第二章测验',
					status: 'pending',
					statusText: '未开始',
					participantCount: 0,
					averageScore: 0
				}
			]
		}
	},
	methods: {
		startLive() {
			// TODO: 调用阿里云直播服务API
			this.isLiving = true
			this.liveUrl = 'rtmp://example.com/live/stream1'
			uni.showToast({
				title: '直播已开始',
				icon: 'success'
			})
		},
		endLive() {
			this.isLiving = false
			uni.showToast({
				title: '直播已结束',
				icon: 'success'
			})
		},
		playRecord(record) {
			// TODO: 调用播放器API
			uni.navigateTo({
				url: `/pages/teaching/player?url=${encodeURIComponent(record.url)}`
			})
		},
		createQuiz() {
			uni.navigateTo({
				url: '/pages/teaching/quiz/create'
			})
		},
		manageQuiz(quiz) {
			if (quiz.status === 'active') {
				quiz.status = 'ended'
				quiz.statusText = '已结束'
			} else {
				quiz.status = 'active'
				quiz.statusText = '进行中'
			}
		}
	}
}
</script>

<style lang="scss">
.container {
	padding: 20rpx;
	
	.section {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
	}
	
	.live-section {
		.live-preview {
			position: relative;
			
			.live-player {
				width: 100%;
				height: 400rpx;
				background: #000;
			}
			
			.live-info {
				padding: 20rpx;
				
				.course-name {
					font-size: 32rpx;
					font-weight: bold;
					display: block;
				}
				
				.teacher-name {
					font-size: 28rpx;
					color: #666;
					margin-top: 10rpx;
					display: block;
				}
				
				.online-count {
					font-size: 24rpx;
					color: #007AFF;
					margin-top: 10rpx;
					display: block;
				}
			}
			
			.end-btn {
				background: #ff4d4f;
				color: #FFFFFF;
				margin-top: 20rpx;
			}
		}
		
		.start-live {
			.start-btn {
				background: #07c160;
				color: #FFFFFF;
			}
		}
	}
	
	.record-list {
		.record-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #F5F5F5;
			
			&:last-child {
				border-bottom: none;
			}
			
			image {
				width: 160rpx;
				height: 90rpx;
				border-radius: 8rpx;
			}
			
			.record-info {
				flex: 1;
				margin-left: 20rpx;
				
				.title {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.play-btn {
				font-size: 24rpx;
				padding: 10rpx 30rpx;
				background: #007AFF;
				color: #FFFFFF;
				border-radius: 30rpx;
			}
		}
	}
	
	.quiz-list {
		.quiz-item {
			background: #f8f8f8;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			
			.quiz-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
				
				.quiz-title {
					font-size: 28rpx;
					font-weight: bold;
				}
				
				.quiz-status {
					font-size: 24rpx;
					padding: 4rpx 12rpx;
					border-radius: 20rpx;
					
					&.active {
						background: #e8f5e9;
						color: #07c160;
					}
					
					&.pending {
						background: #f5f5f5;
						color: #999;
					}
				}
			}
			
			.quiz-stats {
				display: flex;
				gap: 20rpx;
				margin-bottom: 20rpx;
				
				text {
					font-size: 24rpx;
					color: #666;
				}
			}
			
			.quiz-btn {
				font-size: 24rpx;
				background: #007AFF;
				color: #FFFFFF;
			}
		}
	}
	
	.add-btn {
		margin-top: 30rpx;
		background: #07c160;
		color: #FFFFFF;
	}
}
</style> 